<template>

    <el-container>
        <el-header id="manageHeader" height="700px">


            <div class="echart" id="mychart" :style="{ float: 'left', width: '50%', height: '250px' }">
            </div>

            <div class="echart" id="mychart2" :style="{ float: 'left', width: '45%', height: '200px' }">
            </div>



        </el-header>
       
    </el-container>
</template>

<script>
import axios from "axios";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    PieChart,
    LegendComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);

export default {
    name: 'Leaderinfo',
    data() {
        return {
            // 接受学院的信息
            academyName: '',
            // 搜索的表单
            searchBase: {
                teacherName: "",
                checkName: "",
                title: "",
                checkyear: "",
            },
            // 教师职称下拉框
            options: [{
                value: '讲师',
                label: '讲师'
            }, {
                value: '副教授',
                label: '副教授'
            }, {
                value: '教授',
                label: '教授'
            }],
            value: '',
            // 统计表格数据
            tableData: [],

            // 分页
            totalCount: 0,

            // 当前页码
            currentPage: 1,
            pageSize: 5,
        }

    },
    mounted() {
        this.academyName = this.$route.query.academyName
        this.selectAll();
        // this.initEcharts1();
        // this.initEcharts2();

    },
    methods: {
        onsubmit() {
            this.searchBase.title = this.value
            this.selectAll()

        },
        selectAll() {

            axios({
                method: "post",
                url: " http://localhost:8888/Teachersystem/Infomation/infoselect?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&academyName=" + this.academyName,
                data: this.searchBase
            }).then(resp => {
                this.tableData = resp.data.rows;
                this.totalCount = resp.data.totalCount;
            })
        },
        initEcharts1() {
            const myChart = echarts.init(document.getElementById("mychart"));
            axios({
                method: "get",
                url: "http://localhost:8888/Teachersystem/Infomation/getBar"
            }).then((resp) => {// 图标初始化
                myChart.setOption({
                    title: {
                        text: "科研项目统计"
                    },
                    xAxis: {
                        data: ["论文数", "著作数", "科研项目数", "专利数"]
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "销量",
                            type: "bar", //类型为柱状图
                            data: resp.data
                        }
                    ]
                });
            })
        },
        initEcharts2() {
            const myChart = echarts.init(document.getElementById("mychart2"));
            // 图标初始化
            axios({
                method: "get",
                url: "http://localhost:8888/Teachersystem/Infomation/getPie"
            }).then((resp) => {
                myChart.setOption({
                    legend: {
                        // 图例
                        data: resp.data,
                        right: "10%",
                        top: "20%",
                        orient: "vertical"
                    },
                    title: {
                        // 设置饼图标题，位置设为顶部居中
                        text: "教师数据",
                        top: "0%",
                        left: "center"
                    },
                    series: [
                        {
                            type: "pie",
                            label: {
                                show: true,
                                formatter: " {c} 个"
                            },
                            top: "10%",
                            radius: "60%", //饼图半径
                            data: resp.data
                        }
                    ]

                });
            })


        },

        // // 分页操作
        // handleSizeChange(val) {
        //     // console.log(`每页 ${val} 条`);
        //     this.pageSize = val;
        //     this.selectAll();
        // },
        // handleCurrentChange(val) {
        //     // console.log(`当前页: ${val}`);
        //     this.currentPage = val;
        //     this.selectAll();
        // }
    },
}


</script>

<style>
</style>